{include file="common/doc"/}
<style>
    .layui-colla-title {
        background-color: #FFFFFF;
    }

    .laytable-cell-1-0-4 {
        text-align: center;
        height: auto;
        white-space: normal;
    }

</style>
<body>
<script type="text/html" id="op_table">
   <?php  echo $operation['tool']; ?>
</script>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table lay-filter="table_list" id="table_list"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <?php  echo $operation['toolbar']; ?>
</script>
<template id="form_container" style="display:none;">
    <form class="layui-form" id="form" lay-filter="form" style="padding-top:30px;">
        <div class="layui-form-item">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-inline" lay-verify="require">
                <input type="text" class="layui-input" name="field_alias">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">字段名称</label>
            <div class="layui-input-inline" lay-verify="require">
                <input type="text" class="layui-input" name="field_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否可传入</label>
            <div class="layui-input-inline" lay-verify="require">
                <input type="checkbox" name="is_param"  value="1"  checked lay-skin="switch" lay-text="开启|关闭">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">录入方式</label>
            <div class="layui-input-inline" lay-verify="require">
                <select name="input_type" lay-filter="input_type" >
                    <option value=""></option>
                    <option value="1">手工录入</option>
                    <option value="2">列表选择</option>
                </select>
            </div>
        </div>
        <!--附加字段-->
        <div class="attach"></div>
        <!--附加字段-->
        <div class="layui-form-item">
            <label class="layui-form-label">参数说明</label>
            <div class="layui-input-block">
                <textarea name="api_param_desc" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="form_submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</template>
<script src="/layuiadmin/layui/layui.js"></script>

</body>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'table', 'treeSelect', 'layedit'], function () {
        var $ = layui.$
            , form = layui.form
            , layedit = layui.layedit
            , treeSelect = layui.treeSelect
            , table = layui.table;
        table.render({
            elem: '#table_list'
            , height: 'full'
            , skin: 'line'
            , toolbar: '#toolbar'
            , limit: 10
            , url: 'read' + location.search//数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'numbers', title: 'id'},
                {field: 'field_alias', title: '别名', align: 'center'},
                {field: 'api_type_name', title: 'api类型', align: 'center'},
                {field: 'field_name', title: '字段名', align: 'center'},
                {field: 'value', title: '可以选值', align: 'center',templet:function(d){
                        let x = d.value.split('\n');
                        let list = '';
                        x.forEach(function (item) {
                            if (item){
                                list+= item.split('=')[1];
                                list+='<br/>';
                            }

                        });
                        return list;
                    }},
                {field: 'field_type', title: '字段类型', align: 'center',templet:function(d){
                        let x  = ['string','int','date','url'];
                        return x[d.field_type];
                    }},
                {field: 'api_param_desc', title: '说明', align: 'center'},
                {title: '操作', align: 'center', toolbar: '#op_table'},
            ]]
        });
        table.on('toolbar(table_list)',function(obj){
            let event = obj.event;
            if (event.includes('add')){
                layer.open({
                    type:1,
                    area:['500px','500px'],
                    content:$('#form_container').html(),
                    success:function(lay,index){
                        form.render();
                        form.on('select(input_type)',function(chooser_obj){
                            let chooser_val = chooser_obj.value;
                            let attach_container=  $(this).parents('.layui-form-item').next('.attach');
                            switch (chooser_val) {
                                case '1':
                                    /*默认值*/
                                    /*列表选择*/
                                    attach_container.html('');
                                    break;
                                case '2':
                                    /*列表选择*/
                                    attach_container.html(`
                                      <div class="layui-form-item">
            <label class="layui-form-label">可选值</label>
            <div class="layui-input-block">
                <textarea name="value" placeholder="一行代表一个值(key|value)" class="layui-textarea"></textarea>
            </div>
        </div>
                                    `);
                                    break;

                            }
                        });
                        form.on('submit(form_submit)',function(form_data){
                            let field = form_data.field;
                            let  status = request({'url':'add','data':field});
                            if (status){
                                layer.close(index);
                                table.reload('table_list');
                            }
                        })
                    }
                })
            }
        });

        table.on('tool(table_list)',function(obj){
            let event = obj.event;
            console.log(event);
            if (event.includes('upd')){
                form.render();

                layer.open({
                    type:1,
                    area:['500px','500px'],
                    content:$('#form_container').html(),
                    success:function(lay,index){
                        form.render();
                        form.val('form',obj.data);
                        form.on('select(input_type)',function(chooser_obj){
                            let chooser_val = chooser_obj.value;
                            let attach_container=  $(this).parents('.layui-form-item').next('.attach');
                            switch (chooser_val) {
                                case '1':
                                    /*默认值*/
                                    /*列表选择*/
                                    attach_container.html('');
                                    break;
                                case '2':
                                    /*列表选择*/
                                    attach_container.html(`
                                      <div class="layui-form-item">
            <label class="layui-form-label">可选值</label>
            <div class="layui-input-block">
                <textarea name="value" placeholder="一行代表一个值(key=value)" class="layui-textarea"></textarea>
            </div>
        </div>
                                    `);
                                    break;

                            }
                        });
                        form.on('submit(form_submit)',function(form_data){
                            let field =form_data.field;
                            field['api_param_id'] = obj.data['api_param_id'];
                            let status = request({'url':'upd','data':field});
                            if (status){
                                layer.close(index);
                                table.reload('table_list');
                            }
                        })
                    }
                });

            }
            if(event.includes('del')){
                console.log(obj.data['api_param_id']);
                let status = request({'url':'del','data':{'api_param_id':obj.data['api_param_id']}});
                if (status){
                    obj.del();
                }
            }
        })


    });
</script>
</html>
